<!--
 * @Descripttion: 
 * @Author: Kevin
 * @Date: 2022-06-14 10:58:57
 * @LastEditors: Tommy Chen
 * @LastEditTime: 2024-06-07
-->
<template>
  <div>
    <editorLayout
      :title="$t('thirdPart.source')"
      :isVisible="isVisible"
      :steps="steps"
      :currentStep="currentStep"
      @close="onClose"
    >
      <SourceForm ref="sourceFormRef" v-show="currentStep === 0" />
      <MappingForm ref="mappingFormRef" v-show="currentStep === 1" />
      <div slot="foot" class="add-footer">
        <div class="btn-wrapper">
          <a-button @click="onClickPrevious" v-show="currentStep > 0">
            {{ $t('common.back') }}
          </a-button>
          <a-button type="primary" @click="onSave">{{ saveBtnTxt }}</a-button>
        </div>
      </div>
    </editorLayout>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import editorLayout from '@project/authSys/components/editorLayout';
import SourceForm from '../sourceForm.vue';
import MappingForm from '../mappingForm.vue';
import authSysMixin from '@project/authSys/mixin/authSysMixin';
import { requestHttp, maccApi } from '@utils/index';
export default {
  name: 'thirdPartCreator',
  mixins: [authSysMixin],
  components: {
    editorLayout,
    SourceForm,
    MappingForm,
  },
  data() {
    return {
      steps: [this.$t('thirdPart.config'), this.$t('thirdPart.policyMap')],
      currentStep: 0,
      isVisible: false,
    };
  },
  watch: {},
  computed: {
    saveBtnTxt() {
      if (this.currentStep === 0) {
        return this.$t('common.next');
      } else {
        return this.$t('quickCreate.confirmAdd');
      }
    },
  },
  methods: {
    onClickPrevious() {
      this.currentStep--;
    },
    openEditor() {
      this.isVisible = true;
    },
    onClose() {
      this.isVisible = false;
    },
    async onSave() {
      if (this.currentStep === 0) {
        const sourceForm = await this.$refs.sourceFormRef.getModel();
        this.$store.commit('AuthCommon/SET_3RD_SOURCE_FORM', sourceForm);
        if (!sourceForm) {
          return false;
        } else {
          this.$refs.mappingFormRef.getSourceForm();
          this.currentStep += 1;
        }
      } else if (this.currentStep === 1) {
        const mappingForm = await this.$refs.mappingFormRef.getModel();
        if (!mappingForm) {
          return false;
        } else {
          this.save3rdSource(mappingForm);
        }
      }
    },

    async save3rdSource(mappingForm) {
      const res = await this.requestHttpAuth({
        api: maccApi.MACC_SOURCE_ADD_POST_API,
        method: 'POST',
        params: mappingForm,
      });
      if (res.data.success) {
        this.$message.success(this.$t('common.addSuceess'));
        this.$emit('refreshList');
        this.onClose();
      } else {
        this.$message.warning(res.data.message);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.btn-wrapper {
  display: flex;
  gap: 16px;
}
</style>
